<template>
  <div class="setting-container">
    <div class="setting-info">
      <label>请选择配置信息：</label><br>
      <el-select
        width="400px"
        v-model="value1"
        placeholder="请选择"
        @change="selectChange"
      >
        <el-option
          v-for="item in settingInfo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <label>信息列表：</label><br>
      <el-select
        v-model="value2"
        placeholder="请选择"
        filterable
        multiple
      >
        <el-option
          class="info-list"
          v-for="item in infoList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="add-info">
      <label>添加：请输入添加信息</label><br>
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="content"
        :autosize="{minRows:2,maxRows:8}"
        maxlength="100"
        show-word-limit
      >
      </el-input>
    </div>
    <el-button
      type="primary"
      @click="submit"
    >完成</el-button>
  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { getSettings, addSetting, disableSetting } from "@/api/set";
export default {
  name: 'Setting',
  data () {
    return {
      value1: 0,
      value2:[],
      content: '',
      settingInfo: [
        { label: "客户类别", value: 0 },
        { label: "客户等级", value: 1 },
        { label: "报名国家", value: 2 },
        { label: "报名项目", value: 3 },
        { label: "代理商", value: 4 },
      ],
      infoList: [],
    }
  },
  mixins: [ResizeMixin],
  methods: {
    selectChange (value) {
      getSettings({flag:value}).then(res=>{
         this.infoList = res.data
      })
    },
    submit () {
      if(this.content!==''){
        addSetting({flag:this.value1,content:this.content}).then(res => {
          if(res.code===200)
          this.$message('添加成功')
          else
          this.$message('添加失败')
          this.selectChange(this.value1)
        })
      }
      if(this.value2.length!==0){
        disableSetting({flag:this.value1,setIds:this.value2+""}).then(res => {
           if(res.code===200)
          this.$message('禁用成功')
          else
          this.$message('禁用失败')
      })
      }
    }
  },
  created () {
    getSettings({flag:0}).then(res => {
      this.infoList = res.data
    })
  },
}
</script>

<style  scoped>
.el-select,
.el-textarea {
  width: 21.875rem;
}

.setting-container {
  min-height: 90vh;
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.setting-container div {
  margin-bottom: 0.5rem;
}
label {
  font-weight: 300;
}
.info-list:after {
  position: absolute;
  right: 20px;
  font-family: element-icons;
  content: "\e6da";
  font-size: 0.75rem;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  position: absolute;
  right: 20px;
  font-family: element-icons;
  content: "\e6db";
  font-size: 0.75rem;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 550px) {
  .setting-container {
    margin: 0;
    height: 94vh;
  }
  .setting-container div {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
}
</style>